<template>
  <div class="startExam"> 
    <div class="SEContainer">
      <div class="examHeader">
        <h4>{{toExam.examName}}</h4>

        <div style="text-align:right;margin-right:30px">距考试结束还有：<span id="t_m"></span><span id="t_s"></span></div>

      </div>
      <div style="display:flex">
        <div class="topicData">
          <div class="infTitle" style="border-radius: 20px 20px 0 0 ">考生信息</div>
          <div class="stuInf">
            <div>学号：{{stuInf.account}}</div>
            <div style="margin-top:5px">姓名：{{stuInf.username}}</div>
          </div>
          <div class="infTitle">答题卡</div>
          <div class="answerSheet">
            <div v-if="infTitle.choiceQue != 0">
              <div>选择题</div>
              <div style="display:flex">
                <a href="#" v-for="(data, i) in infTitle.choiceQue">
                  <div class="answerSheetBtn" @click="jump('choiceQue', i)" v-bind:id="bindid('choiceQue', i)">{{i + 1}}</div>
                </a>
              </div>
            </div>
            <div v-if="infTitle.judgeQue != 0">
              <div>判断题</div>
              <div style="display:flex">
                <a href="#" v-for="(data, i) in infTitle.judgeQue">
                  <div class="answerSheetBtn" @click="jump('judgeQue', i)" v-bind:id="bindid('judgeQue', i)">{{i + 1}}</div>
                </a>
              </div>
            </div>
            <div v-if="infTitle.fillBlankQue != 0">
              <div>填空题</div>
              <div style="display:flex">
                <a href="#" v-for="(data, i) in infTitle.fillBlankQue">
                  <div class="answerSheetBtn" @click="jump('fillBlankQue', i)" v-bind:id="bindid('fillBlankQue', i)">{{i + 1}}</div>
                </a>
              </div>
            </div>
            <div v-if="infTitle.comprehensiveQue != 0">
              <div>综合题</div>
              <div style="display:flex">
                <a href="#" v-for="(data, i) in infTitle.comprehensiveQue">
                  <div class="answerSheetBtn" @click="jump('comprehensiveQue', i)" v-bind:id="bindid('comprehensiveQue', i)">{{i + 1}}</div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="textPaper">
          <div class="topicTitle">{{this.show.topicType}}</div>
          <div class="topic">
            <h5 style="max-width:500px;">{{show.num + 1 }}、({{show.topicScore}}分){{show.stem}}</h5>
            <el-radio-group v-if="show.topicType == '单选题'" @change="discoloration('choiceQue', show.num)" v-model="option[show.num]" size="mini" >
              <el-radio label="A" style="margin-bottom:10px;">A、{{show.A}}</el-radio><br>
              <el-radio label="B" style="margin-bottom:10px">B、{{show.B}}</el-radio><br>
              <el-radio label="C" style="margin-bottom:10px">C、{{show.C}}</el-radio><br>
              <el-radio label="D" style="margin-bottom:10px">D、{{show.D}}</el-radio><br>
            </el-radio-group>
            <el-radio-group v-if="show.topicType == '判断题'" @change="discoloration('judgeQue', show.num)" v-model="judge[show.num]" size="mini" >
              <el-radio label="true" style="margin-bottom:5px;margin-top: -50px;">
                <i class="el-icon-check"></i>
              </el-radio>
              <el-radio label="false" style="margin-bottom:5px">
                <i class="el-icon-close"></i>
              </el-radio>
            </el-radio-group>
            <el-input v-if="show.topicType == '填空题'" style="width:300px" @change="discoloration('fillBlankQue', show.num, fillBlank[show.num])" v-model="fillBlank[show.num]" placeholder="请输入内容"></el-input>
            <el-input v-if="show.topicType == '综合题'" style="width:500px" @change="discoloration('comprehensiveQue', show.num, comprehensive[show.num])" v-model="comprehensive[show.num]" type="textarea" :autosize="{ minRows: 4, maxRows: 10}" placeholder="请输入内容" ></el-input>
          </div>
          <el-button-group>
            <el-button v-if="!havePrev" @click="noPrev" type="primary" icon="el-icon-close" id="dis">此为第一题</el-button>
            <el-button v-if="havePrev" @click="toPrev" type="primary" icon="el-icon-arrow-left" id="dis">上一题</el-button>
            <el-button v-if="haveNext" @click="toNext" type="primary">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            <el-button v-if="!haveNext" @click="endExam" type="primary">提 交<i class="el-icon-finished  el-icon--right"></i></el-button>
          </el-button-group>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getExamPaper } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      stuInf: {},
      toExam: {},
      textPaper: {},
      option: [],
      judge: [],
      fillBlank: [],
      comprehensive: [],

      prev: {},
      show: {},
      next: {},
      infTitle: {
        choiceQue: 0, 
        judgeQue: 0, 
        fillBlankQue: 0, 
        comprehensiveQue: 0
      },

      havePrev: false,
      haveNext: false,
      timer: null,
    }
  },
  components: {
    headMenu
  },
  created() {
    this.toExam = JSON.parse(sessionStorage.getItem('toExam'))
    this.stuInf = JSON.parse(localStorage.getItem('userInfo'))
    this.getExamPaper(this.toExam)
  },
  activated () {
    this.timer = setInterval(() => {
      this.countDown(); //每秒更新一次时间
    }, 1000);
  },
  mounted(){
    this.timer
  },
  deactivated () {
    clearInterval(this.timer)
    this.timer = null
    Object.assign(this.$data, this.$options.data.call(this));
  },
  methods: {
    async getExamPaper(inf) {
      await getExamPaper(inf)
        .then((res) => {
          this.textPaper = res.textPaper
          // console.log(res.textPaper);

          let examdata = JSON.parse(sessionStorage.getItem('ExamInf'))
          if (examdata != null) {
            this.option = examdata.option
            this.judge = examdata.judge
            this.fillBlank = examdata.fillBlank
            this.comprehensive = examdata.comprehensive
          }
          this.getInfTitle()
          this.showTopic()
        })
    },
    getInfTitle() {
      let type = ['choiceQue', 'judgeQue', 'fillBlankQue', 'comprehensiveQue']
      for (let i = 0; i < type.length; i++) {
        this.infTitle[type[i]] = this.textPaper[type[i]].length
      }
    },
    jump(turnType, i){
      // this.show
      this.show = this.textPaper[turnType][i]
      this.show['type'] = turnType
      this.show['num'] = i
      
      // this.prev
      if (this.show.num != 0) {
        this.prev = this.textPaper[this.show.type][this.show.num - 1]
        this.prev['type'] = this.show.type
        this.prev['num'] = this.show.num - 1
      }else{
        let type = ['comprehensiveQue', 'fillBlankQue', 'judgeQue', 'choiceQue']
        let i = type.findIndex((item) => item === this.show.type) + 1
        for (i; i < type.length; i++) {
          if (this.textPaper[type[i]] != '') {
            this.prev = this.textPaper[type[i]][this.textPaper[type[i]].length - 1]
            this.prev['type'] = type[i]
            this.prev['num'] = this.textPaper[type[i]].length - 1
            break
          }
        }
      }
      this.chackBtn()

      // this.next
      if (this.textPaper[this.show.type].length > this.show.num + 1) {
        this.next = this.textPaper[this.show.type][this.show.num + 1]
        this.next['type'] = this.show.type
        this.next['num'] = this.show.num + 1
      }else{
        let type = ['choiceQue', 'judgeQue', 'fillBlankQue', 'comprehensiveQue']
        let i = type.findIndex((item) => item === this.show.type) + 1
        for (i; i < type.length; i++) {
          if (this.textPaper[type[i]] != '') {
            this.next = this.textPaper[type[i]][0]
            this.next['type'] = type[i]
            this.next['num'] = 0
            break
          }
        }
      }
      this.chackBtn()
    },
    bindid(type, i){
      return type + i
    },
    discoloration(type, i, data){
      if (data === '') {
        document.getElementById(type + i).style.color = '#409eff'
        document.getElementById(type + i).style.border = '#b3d8ff'
        document.getElementById(type + i).style.backgroundColor = '#ecf5ff'
      }else{
        document.getElementById(type + i).style.color = '#fff'
        document.getElementById(type + i).style.border = '#409eff'
        document.getElementById(type + i).style.backgroundColor = '#409eff'
      }
    },
    showTopic(){
      let type = ['choiceQue', 'judgeQue', 'fillBlankQue', 'comprehensiveQue']
      // this.show  
      if (JSON.stringify(this.prev) === '{}') {
        for (let i = 0; i < type.length; i++) {
          if (this.textPaper[type[i]] != '') {
            this.show = this.textPaper[type[i]][0]
            this.show['type'] = type[i]
            this.show['num'] = 0
            break
          }
        }
      }

      //this.next
      if (this.textPaper[this.show.type].length > this.show.num + 1) {
        this.next = this.textPaper[this.show.type][this.show.num + 1]
        this.next['type'] = this.show.type
        this.next['num'] = this.show.num + 1
      }else{
        let i = type.findIndex((item) => item === this.show.type) + 1
        for (i; i < type.length; i++) {
          if (this.textPaper[type[i]] != '') {
            this.next = this.textPaper[type[i]][0]
            this.next['type'] = type[i]
            this.next['num'] = 0
            break
          }
        }
      }
      this.chackBtn()
    },
    toNext(){
      this.prev = this.show
      this.show = this.next
      this.showTopic()
    },
    toPrev() {
      this.next = this.show
      this.show= this.prev

      // this.prev
      let type = ['comprehensiveQue', 'fillBlankQue', 'judgeQue', 'choiceQue']
      if (this.show.num != 0) {
        this.prev = this.textPaper[this.show.type][this.show.num - 1]
        this.prev['type'] = this.show.type
        this.prev['num'] = this.show.num - 1
      }else{
        let i = type.findIndex((item) => item === this.show.type) + 1
        for (i; i < type.length; i++) {
          if (this.textPaper[type[i]] != '') {
            this.prev = this.textPaper[type[i]][this.textPaper[type[i]].length - 1]
            this.prev['type'] = type[i]
            this.prev['num'] = this.textPaper[type[i]].length - 1
            break
          }
        }
      }
      this.chackBtn()
    },
    chackBtn() {
      if (this.next == this.show || JSON.stringify(this.next) == '{}') {
        this.haveNext = false
      }else {
        this.haveNext = true
      }

      if (this.prev == this.show || JSON.stringify(this.prev) === '{}') {
        this.havePrev = false
      }else {
        this.havePrev = true
        document.getElementById("dis").disabled = false
      }
    },
    noPrev(){
      Toast('此为第一题，请作答')
      document.getElementById("dis").disabled = true
    },
    endExam(){  
      if (this.option.indexOf(null) > -1 || this.judge.indexOf(null) > -1 || this.fillBlank.indexOf(null) > -1 || this.comprehensive.indexOf(null) > -1 
          || this.option.length < this.infTitle.choiceQue || this.judge.length < this.infTitle.judgeQue || this.fillBlank.length < this.infTitle.fillBlankQue || this.comprehensive.length < this.infTitle.comprehensiveQue) {
        this.$confirm('还有题目未完成, 是否提交试卷?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path:'/student/submitExam',
          })
        }).catch(() => {

          if (this.option.indexOf(null) > -1) {
            this.jump('choiceQue', this.option.indexOf(null))
          }else if(this.option.length < this.infTitle.choiceQue){
            this.jump('choiceQue', this.option.length)
          }else if(this.judge.indexOf(null) > -1){
            this.jump('judgeQue', this.judge.indexOf(null))
          }else if(this.judge.length < this.infTitle.judgeQue){
            this.jump('judgeQue', this.judge.length)
          }else if(this.fillBlank.indexOf(null) > -1){
            this.jump('fillBlankQue', this.fillBlank.indexOf(null))
          }else if(this.fillBlank.length < this.infTitle.fillBlankQue){
            this.jump('fillBlankQue', this.fillBlank.length)
          }else if(this.comprehensive.indexOf(null) > -1){
            this.jump('comprehensiveQue', this.comprehensive.indexOf(null))
          }else if(this.comprehensiven.length < this.infTitle.comprehensiveQue){
            this.jump('comprehensiveQue', this.comprehensive.length)
          }
        })
      }else{
        this.$router.push({
          path:'/student/submitExam',
        })
      }
    },
    countDown(){
      let NowTime = new Date();
      let t = new Date(this.toExam.EndTime).getTime() - NowTime.getTime();
      let m = Math.floor(t/1000/60%60) + 60 * Math.floor(t/1000/60/60%24);
      let s = Math.floor(t/1000%60);
      if (m < 10) { m = '0' + m }
      if (s < 10) { s = '0' + s }
      document.getElementById("t_m").innerHTML = m + "分";
      document.getElementById("t_s").innerHTML = s + "秒";

      // 保持数据
      sessionStorage.setItem('ExamInf', JSON.stringify({
        option: this.option,
        judge: this.judge,
        fillBlank: this.fillBlank,
        comprehensive: this.comprehensive,
      }))
    },
  },
}
</script>

<style lang='stylus'>
.startExam
  color #666
  flex 1 1 100%
  display block
  .SEContainer
    background-color #fffef9
    text-align center
    .examHeader
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
      #timer
        color #50a3a2
    .topicData
      width 240px
      box-shadow 1px 1px 5px #888
      border-radius 20px
      margin 10px
      .infTitle
        background-color #50a3a2
        font-size 22px
        color white
        padding 5px 0
      .stuInf
        text-align left
        margin 10px
      .answerSheet
        text-align left
        margin 10px
        max-height 380px
        overflow-y auto
        .answerSheetBtn
          width 28px
          height 28px
          border-radius 100%
          display flex
          align-items center
          justify-content center
          color #409EFF
          border 1px solid #b3d8ff
          background-color #ecf5ff
          margin 5px
    .textPaper
      flex 1 1 100%
      margin 10px
      .topicTitle
        text-align left
        border 1px solid rgba(0, 0, 0, 0.1)
        padding 5px
      .topic
        text-align left
        min-height 450px
        max-height 500px
        padding 5px 20px 0 20px
        margin 10px 0
        border 1px solid rgba(0, 0, 0, 0.1)
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
</style>